
<template>
  <div>
   <!-- 评分组件 -->
   <div class="bg-slate-50  p-4 rounded-md w-[300px] space-y-4">
      <!-- <span class="text-sm">{{ index1+1 }}. {{ question.type }}，{{ question.score }}分</span> -->
      <!-- 评分 -->
       <div class="flex items-center space-x-3">
          <span class="whitespace-nowrap font-bold ">评分</span>
          <el-input v-model.number="scoreValue" :placeholder="placeholder" class="w-20 font-bold text-xl" @keyup="checkScore"></el-input>
          <span class="whitespace-nowrap">分</span>
      </div>
      <!-- 快速打分设置 -->
       <div class="space-y-2">
          <div class="flex items-center space-x-2 justify-between  text-gray-400">
              <div class="score-div flex items-center">
                  <span class="text-sm whitespace-nowrap">快速打分 分值模式</span>
                  <el-select v-model="scoreMode"  class="score-select" >
                      <el-option label="百分制模式" value="hundred"></el-option>
                      <el-option label="分支模式" value="score"></el-option>
                  </el-select>    
              </div>
              <div class="flex items-center space-x-2" @click="quickScoreDialogVisible=true">
                  <font-awesome-icon :icon="['fa', 'pen']" class="text-[12px] "/>
                  <span class="text-sm whitespace-nowrap" >编辑</span>
              </div>
            
          </div>
           <ul class="flex flex-wrap score-mode" v-show="scoreMode=='hundred'">
               <li v-for="item in quickScoreLevels" @click="changeScoreByHundred(item)"  :class="[item.isChecked?'bg-blue-500 text-white':'text-[#474C59]']">{{ item.name }}</li>
           </ul>
          <!-- 分值模式  根据分值模式看是否显示-->
           <ul class="flex flex-wrap score-mode" v-show="scoreMode=='score'">
               <li class="zero" @click="changeScore('zero',0)">0分</li>
               <li class="full" @click="changeScore('full',baseScore)">满分</li>
               <li v-for="item in scoreLevels" @click="changeScore('score',item)" :class="[item.isChecked?'bg-blue-500 text-white':'text-[#474C59]']" >{{ item.score }}</li>
           </ul>
       </div>
       <!-- 评语 -->
        <div class="bg-white border border-gray-200 py-2 px-4" @click="isShowComment=true" v-if="!isShowComment">
          <span class="text-gray-400 text-sm">请输入评语</span>
        </div>
        <div class="bg-white border border-gray-200 py-2 px-4" v-if="isShowComment">
          <!-- <el-input  class="w-full h-20" placeholder="请输入评语"></el-input> -->
           <RichTextEditor v-model:html="comment"  @change="(html)=>{comment = html}" />
        </div>

      <!-- 快速评语 -->
      <div class="space-y-2">
          <div class="flex items-center space-x-2 justify-between  text-gray-400">
              <div class="score-div flex items-center">
                  <span class="text-sm whitespace-nowrap">快速评语</span>  
              </div>
              <div class="flex items-center space-x-2" @click="commentDialogVisible=true">
                  <font-awesome-icon :icon="['fa', 'pen']" class="text-[12px] "/>
                  <span class="text-sm whitespace-nowrap">编辑</span>
              </div> 
          </div>
           <!-- 快速评语-->
           <ul class="flex flex-wrap fastCommentList" >
               <li @click="handleComment(item.name)" v-for="(item,index) in fastCommentList" :key="index">{{ item.name }}</li>
               <!-- <li >回答错误</li>
               <li >回答基本正确</li> -->
           </ul>
      </div>    
      <!-- 快速评语 -->
      <div class="space-y-2">
          <div class="flex items-center space-x-2 justify-between  text-gray-400">
              <div class="score-div flex items-center">
                  <span class="text-sm whitespace-nowrap">添加标记</span>  
              </div>
              <div class="flex items-center space-x-2" @click="markDialogVisible=true">
                <font-awesome-icon :icon="['fa', 'pen']" class="text-[12px] "/>
                  <span class="text-sm whitespace-nowrap">标记为</span>
              </div>
          </div>
          <!-- 展示选中的标记 -->
           <ul class="flex flex-wrap fastCommentList " >
             <li v-for="(item,index) in selectedMark" :key="index" class="rounded  relative z-10" @mouseenter="item.isDelete=true" @mouseleave="item.isDelete=false">
               <p>{{ item.name }}</p>        
                <el-icon class="text-gray-400 font-bold absolute  top-[-2px] right-[-5px] z-50 " v-show="item.isDelete" @click="deleteSelectedMark(item)" ><CircleCloseFilled /></el-icon>                  
             </li>
           </ul>
      </div>    
  </div>



 <!-- 快速设置分值 -->
   <el-dialog v-model="quickScoreDialogVisible" title="快速打分设置"   width="30%" class="rounded-lg">
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <span :id="titleId" :class="titleClass">
              设置快速打分
            </span>    
          </div>
        </template>
      <div class="flex border-t border-b border-gray-200 min-h-[300px] overflow-y-auto">
        <!-- 百分之打分 -->
        <div class="p-6 w-full" v-if="scoreMode=='hundred'">
           <ul>
              <li v-for="item in quickScoreLevels" :key="item.id" class="p-2 flex items-center justify-between cursor-pointer hover:bg-blue-50" 
              @mouseenter="item.showActions = true" @mouseleave="item.showActions = false">
                <span  v-if="!item.isEditing">{{item.name}}</span>
                <div v-if="item.isEditing" class="flex items-center space-x-2 pr-2">
                  <el-input v-model="item.editingName" class="w-[100px] "  @keyup.enter="confirmRename(row)" />
                  <div class="flex gap-2 ">
                    <el-icon class="cursor-pointer text-blue-500" @click="confirmRename(item)"> <Check /></el-icon>
                    <el-icon class="cursor-pointer text-gray-400" @click="cancelRename(item)"><Close /></el-icon>
                  </div>
                </div> 
                <div class="flex items-center space-x-2 pr-2">
                  <el-button link type="primary" class=""  @click="startRename(item)"  v-show="item.showActions" >重命名</el-button>
                  <el-button link type="primary" class="" @click="deleteLevel(item)"  v-show="item.showActions">删除</el-button>
                  <span>学生得分等于总分的</span>
                  <el-input class="w-20" v-model="item.rate"/>
                  <span>%</span>
                </div>
              </li>
            </ul>
        </div>
        <!-- 直接设置分值 -->
        <div class="p-6 w-full flex items-start gap-4 flex-wrap" v-if="scoreMode=='score'">
          <div class="flex items-center space-x-2 p-3 hover:bg-blue-100 " v-for="(item,index) in scoreLevels" :key="index">
            <el-input class="w-20" v-model.lazy.number="item.score"/>
            <span>分</span>
            <el-button link :icon="Delete" @click="deleteScoreLevel(index)"></el-button>
          </div>  
        </div>
      </div>  
      <template #footer>
          <div class="px-6 flex items-center justify-between"> 
              <div class="flex justify-between right-div pr-4">
            <el-button link  type="primary"  @click="addNewLevel" :icon="Plus" v-if="scoreMode=='hundred'">添加等级</el-button>
            <el-button link  type="primary"  @click="addNewScore" :icon="Plus"  v-if="scoreMode=='score'">添加自定义分值</el-button>
          </div>
            <div class="flex gap-4">
              <el-button @click="cancelAddLevel" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="confirmAddLevel" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
    </el-dialog>
<!-- 设置快速评语的弹出框 -->
    <el-dialog v-model="commentDialogVisible" title="评语" width="30%" class="rounded-lg">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <span :id="titleId" :class="titleClass">
              设置快速评语
            </span>    
          </div>
        </template>
        <div class="flex border-t border-b border-gray-200 min-h-[300px] overflow-y-auto">
          <div class="p-6 w-full" v-if="scoreMode=='hundred'">
            <el-button link  type="primary"  @click="addNewQuickComment" :icon="Plus"  class="mb-2">添加批语</el-button>
            <ul>
                <li v-for="item in fastCommentList" :key="item.id" class="p-2 flex items-center justify-between cursor-pointer hover:bg-blue-50" 
                @mouseenter="item.showActions = true" @mouseleave="item.showActions = false">
                  <span  v-if="!item.isEditing">{{item.name}}</span>
                  <div v-if="item.isEditing" class="flex items-center space-x-2 pr-2">
                    <el-input v-model="item.editingName" class="w-[100px] "  @keyup.enter="confirmRename(item)" />
                    <div class="flex gap-2 ">
                      <el-icon class="cursor-pointer text-blue-500" @click="confirmRename(item)"> <Check /></el-icon>
                      <el-icon class="cursor-pointer text-gray-400" @click="cancelRename(item)"><Close /></el-icon>
                    </div>
                  </div> 
                  <div class="flex items-center space-x-2 pr-2">
                    <el-button link type="primary" class=""  @click="startRename(item)"  v-show="item.showActions" >重命名</el-button>
                    <el-button link type="primary" class="" @click="deleteComment(item)"  v-show="item.showActions">删除</el-button>
                  </div>
                </li>
              </ul>
          </div>
        </div> 
        <template #footer>
          <div class="px-6 flex items-center justify-between"> 
              <div class="flex items-center justify-between  space-x-2 ">
              <el-checkbox v-model="commentCheck"/>
              <span class="text-gray-500 text-sm">选择多个快速批语时, 保留已添加的快速批语</span>
             <el-tooltip effect="dark" placement="top-start">
                  <template #content>勾选后，若选择多个快速批语，批阅框<br>将保留之前已添加的快速批语；未勾选<br>时，选择新的快速批语会替换之前已添<br>加的快速批语 </template>
                  <el-icon class="text-gray-400"><InfoFilled/></el-icon>
                </el-tooltip>
              
          </div>
            <div class="flex gap-4">
              <el-button @click="cancelAddComment" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="confirmComment" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
   </el-dialog>
   <!-- 添加标记的dialog框 -->
    <el-dialog v-model="markDialogVisible" title="标记为" width="30%" class="rounded-lg">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <span :id="titleId" :class="titleClass">
              标记为
            </span>    
            <span class="text-gray-400 text-sm">给学生添加标记（仅教师可见），可在单题统计页查看有相同标记的学生</span>
          </div>
        </template>
        <div class="border-t border-b border-gray-200 min-h-[300px] overflow-y-auto ">
           <div class="flex items-center justify-between bg-gray-100 px-5 py-2 ">
              <el-checkbox label="标记名" disabled=""></el-checkbox>
              <span class="text-gray-400">共{{ markList.length }}个</span>
            </div>
          <div class="p-4 w-full" v-if="scoreMode=='hundred'">
            <ul>
                <li v-for="item in markList" :key="item.id" class="p-2 flex items-center justify-between cursor-pointer hover:bg-blue-50" 
                @mouseenter="item.showActions = true" @mouseleave="item.showActions = false">
                <div class="flex items-center space-x-3">
                  <el-checkbox v-model="item.isChecked" ></el-checkbox>
                  <span  v-if="!item.isEditing">{{item.name}}</span>
                 
                  <div v-if="item.isEditing" class="flex items-center space-x-2 pr-2">
                    <el-input v-model="item.editingName" class="w-[100px] "  @keyup.enter="confirmRename(item)" />
                    <div class="flex gap-2 ">
                      <el-icon class="cursor-pointer text-blue-500" @click="confirmRename(item)"> <Check /></el-icon>
                      <el-icon class="cursor-pointer text-gray-400" @click="cancelRename(item)"><Close /></el-icon>
                    </div>
                  </div> 
                   </div>
                  <div class="flex items-center space-x-2 pr-2">
                    <el-button link type="primary" class=""  @click="startRename(item)"  v-show="item.showActions" >重命名</el-button>
                    <el-button link type="primary" class="" @click="deleteMark(item)"  v-show="item.showActions">删除</el-button>
                  </div>
                </li>
              </ul>
          </div>
        </div> 
        <template #footer>
          <div class="px-6 flex items-center justify-between"> 
              <div class="flex items-center justify-between  space-x-2 ">
               <el-button link  type="primary"  @click="addNewMark" :icon="Plus"  class="mb-2">新建标记</el-button>    
          </div>
            <div class="flex gap-4">
              <el-button @click="markDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="confirmMark" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
   </el-dialog>

 
    </div>
</template>

<script setup>
import { ref, reactive, watch, toRaw, computed ,toRefs} from 'vue'
import {Plus,Delete} from '@element-plus/icons-vue'
import { ElMessage,ElMessageBox} from 'element-plus'
import RichTextEditor from '@/components/RichTextEditor.vue'

// 父组件传参s
const props = defineProps({
  //基本分数
  baseScore:{type:Number,default:5},
  //评分信息
  score:{type:Number,default:4.5},
  //评语
  questionComment:{type:String,default:''},
  //标记
  questionMark:{type:Array,default:[]},

})
const {baseScore} = toRefs(props)
const emit = defineEmits(['update:score','update:questionComment','update:questionMark'])
//评分模式
const scoreMode=ref('hundred')
// 分数
const scoreValue=ref(props.score)
const placeholder=ref('')
// 分数校验
const checkScore = () => {
  console.log('分数校验');
  if(scoreValue.value > baseScore.value || scoreValue.value < 0) { 
    // ElMessageBox.confirm('分数不在范围内，请重新输入')
    scoreValue.value=null
    placeholder.value='0-'+baseScore.value
   ElMessage({
    message: '分数输入不在范围内，请重新输入！',
    type: 'warning',
  })
  }else{
    emit('update:score', scoreValue.value)
  }
}
watch(scoreValue, (newVal, oldVal) => { 
  console.log('scoreValue', newVal, oldVal)
   if(scoreValue.value > baseScore.value || scoreValue.value < 0) { 
    // ElMessageBox.confirm('分数不在范围内，请重新输入')
    scoreValue.value=null
    placeholder.value='0-'+baseScore.value
   ElMessage({
    message: '分数输入不在范围内，请重新输入！',
    type: 'warning',
  })
  }else{
    emit('update:score', scoreValue.value)
  }
})
// 改变分数
const  changeScore = (type,val) => {
  // 清空其他的背景颜色
  scoreLevels.value.forEach(item => {
    item.isChecked = false
  })
  if(type=='zero' || type=='full'){
    scoreValue.value = val 
  }else{
    scoreValue.value = val.score
  }
  
  val.isChecked=true
  emit('update:score', scoreValue.value)
}

// 更有百分百不打分
const  changeScoreByHundred=(val)=>{
  // console.log(val);
  //清空其他的背景颜色
  quickScoreLevels.value.forEach(item => {
    item.isChecked = false
  })
  scoreValue.value = val.rate * baseScore.value / 100
  val.isChecked=true
  emit('update:score', scoreValue.value)
}


//快速打分
const quickScoreDialogVisible = ref(false);
//重名名
const startRename = (row) => {
  row.isEditing = true;
  row.editingName = row.name;
};
//确认重命名
const confirmRename = (row) => {
  if (row.editingName.trim()) {
    row.name = row.editingName;
  }
  row.isEditing = false;
};
//取消重命名
const cancelRename = (row) => {
  row.isEditing = false;
  row.editingName = row.name;
};
// 快速打分级别列表
const  quickScoreLevels = ref([
  { id: 1, name: 'A',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false,rate:100 },
  { id: 2, name: 'B',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false,rate:80},
  { id: 3, name: 'C',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false,rate:70},
  { id: 4, name: 'D',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false,rate:60},
  { id: 5, name: 'E',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false,rate:50},
]);
// 分值模式的分值设置
const  scoreLevels = ref([
  { id: 1,score:1},
  { id: 2,score:2},
  { id: 3,score:3},
  { id: 4,score:4},
  { id: 5,score:5},
]);
// 删除分支值
const deleteScoreLevel = (index) => { 
  scoreLevels.value.splice(index, 1);
}

//  删除打分级别
const  deleteLevel = (level) => { 
  // todo 调用后端接口删除知识点
  quickScoreLevels.value = quickScoreLevels.value.filter(i => i.id !== level.id);
}
//新添加的分值等级
const  newAddScore = ref(null);
//添加新的分值 
const  addNewScore=()=>{
  const newLevel = { id: Date.now(), score: '' };
  newAddScore.value = newLevel;
  scoreLevels.value.push(newLevel);
}
//新添加的百分制等级
const newAddLevel = ref(null);
 // 添级别的方法
const addNewLevel=()=>{
  console.log("添加知识点")
  const newLevel = { id: Date.now(), name: '',isEditing: true,isRename:false,editingName:'',isChecked:false ,rate:null};
  quickScoreLevels.value.push(newLevel);
  newAddLevel.value = newLevel;
}
// 快速设置分
const cancelAddLevel = () => { 
  console.log("取消添加等级")
   //删除新添加的等级
   if(scoreMode.value=='hundred'){
    console.log(quickScoreLevels.value.indexOf(newAddLevel.value));
    // 删除新添加的等级
    // todo  后端删除
    if(quickScoreLevels.value.indexOf(newAddLevel.value)>-1){
  
      quickScoreLevels.value.splice(quickScoreLevels.value.indexOf(newAddLevel.value),1);
    }
   }else  if(scoreMode.value=='score'){
    // todo  后端删除
    if(scoreLevels.value.indexOf(newAddScore.value)>-1){ 
      scoreLevels.value.splice(scoreLevels.value.indexOf(newAddScore.value),1);
    }
   
   }
  quickScoreDialogVisible.value = false;
}

const confirmAddLevel = () => { 
  console.log("确认添等级")
  // // todo 调用后端接口保存
  if(scoreMode.value=='hundred'){

  }else if(scoreMode.value=='score'){

  }
  
 };

 //是否显示评语的编辑框 
 const isShowComment = ref(false);
 const comment = ref("");
//快速评语
const fastCommentList=ref([
   { id: 1,name: '回答正确',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false },
   { id: 2,name: '回答错误',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false },
   { id: 3,name: '回答基本正确',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false },
])
// 点击评语
const  handleComment=(val)=>{
  console.log(val);
  comment.value=val;
  isShowComment.value=true;
  emit('update:questionComment',comment.value)

}
// 评语的弹框 
const commentDialogVisible = ref(false);
//
const  commentCheck=ref(false);
const   newComment=ref(null)

//添加快速评语
const addNewQuickComment=()=>{
  const newCom = { id: Date.now(), name:'',isEditing: true,isRename:false,editingName:'',isChecked:false ,rate:null};
  fastCommentList.value.push(newCom);
  newComment.value = newCom;
}
const  deleteComment = (level) => { 
  // todo 调用后端接口删除知识点
  fastCommentList.value = fastCommentList.value.filter(i => i.id !== level.id);
}
//取消添加评语 
const   cancelAddComment=()=>{
  // todo 调用后端接口删除知识点
  if(fastCommentList.value.indexOf(newComment.value)>-1){
    // 删除新添加的等级
    // todo  后端删除
    fastCommentList.value.splice(fastCommentList.value.indexOf(newComment.value),1);
   }
   commentDialogVisible.value=false;
}
// 评语弹框确认按钮
const confirmComment=()=>{
  console.log('确认添加新的快评',newComment.value);
  //todo 调用后端接口保存评语
}
/******************标记相关的**********************/
const  markDialogVisible = ref(false);
//标记列表
const  markList = ref([
  { id: 1,name:'正确',isEditing: false,isRename:false,editingName:'',isChecked:false ,isDelete:false},
  { id: 2,name:'错误',isEditing: false,isRename:false,editingName:'',isChecked:false ,isDelete:false},
  { id: 3,name:'基本正确',isEditing: false,isRename:false,editingName:'',isChecked:false ,isDelete:false},
])
// 新添加的标记
const newMark=ref(null);
// 添加新的标记
const addNewMark=()=>{
  console.log("添加标记")
  const newLevel = { id: Date.now(), name: '',isEditing: true,isRename:false,editingName:'',isChecked:false,isDelete:false };
  markList.value.push(newLevel);
  newMark.value = newLevel;
}
// 删除标记
const  deleteMark = (val) => { 
  // todo 调用后端接口删除知识点
  markList.value = markList.value.filter(i => i.id !== val.id);
}
// 被选中的标记
const  selectedMark=ref([])
// 确认选中和添加标记
const  confirmMark=()=>{
  console.log('确认添加新的标记',newMark.value);
  selectedMark.value = markList.value.filter(i => i.isChecked);

  //todo 调用后端接口保存评语
  emit('update:questionMark',selectedMark.value);
  markDialogVisible.value=false;
}
//删除选中的标记
const  deleteSelectedMark=(val)=>{
  console.log(val,selectedMark.value);
  selectedMark.value=selectedMark.value.filter(i => i.id !== val.id);
  emit('update:questionMark',selectedMark.value);
}
</script>
<style lang="less" scoped>
.score-select :deep(.el-select__selection) {
  display: none;
}
.score-select :deep(.el-select__wrapper,.el-tooltip__trigger,.el-tooltip__trigger) {
  background: none !important;
  box-shadow: none !important;
}

.score-mode li {
    display: inline-block;
    //float: left;
    cursor: pointer;
    border: 1px solid #D4D6D9;
    border-radius: 5px;
    font-size: 14px;
    // color:#474C59;
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 12px 12px 0;
    // background: #fff;
    padding: 0 5px;
    max-width: 100%;
}

.score-mode li.zero {
    color:#fff;
    background: #F36161;
    border: 1px solid #F36161;
}
.score-mode li.full {
    color:#fff;
    background: #52CC5C;
    border: 1px solid #52CC5C;
}

.fastCommentList li {
    display: inline-block;
   // float: left;
    cursor: pointer;
    border: 1px solid #DADFE5;
    border-radius: 4px;
    font-size: 12px;
    color: #8A8B99;
    padding: 0 8px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 12px 12px 0;
    background: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    //overflow: hidden;
    max-width: 100%;
}
</style>